<template>
  <div class="info-page">
    <div class="movie-detail">
      <el-image class="movie-image" :src="img_url" alt="流浪地球"></el-image>
      <div class="movie-briefInfo">
        <div class="movie-info-item title">{{movie.name}}</div>
        <div class="movie-info-item type">{{movie.type}}</div>
        <div class="movie-info-item date">{{movie.date}}</div>
      </div>
    </div>
    <div class="movie-description">
      <h3>Description</h3>
      <p>{{ movie.description }}</p>
    </div>

    <ReviewSection :movie_id="movie.id"/>
  </div>
</template>

<script setup>
import {base64DataToImgURL} from "@/utils/Base64Util.js";
import ReviewSection from "./review/ReviewSection.vue";
import {onMounted, ref} from "vue";
import request from "@/axios/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.ts";
import ReviewList from "@/components/review/ReviewList.vue";
import ReviewForm from "@/components/review/ReviewForm.vue";

const movie = ref({
  id: 0,
  name: "",
  type: "",
  description: "",
  nation: "",
  date: "",
  img: "",
  page_view: 0,
  score: 0
})

const img_url = ref("")

// 挂载时获取请求参数
onMounted(async () => {
  console.log('Movie:', router.currentRoute.value.query)
  let movie_id = router.currentRoute.value.query.movie_id
  await getMovieInfo(movie_id)
  await getReviews(movie_id)
})

// 获取电影信息
function getMovieInfo(movie_id) {
  request.get('/movie/getone?movie_id=' + movie_id
  ).then(res => {
    if (res.code !== 200) {
      console.log('获取电影失败')
      ElMessage.error('获取电影详情失败')

    } else {
      movie.value = res.data
      if (movie.value.img != null && movie.value.img.length > 0)
        img_url.value = base64DataToImgURL(movie.value.img)
      console.log(movie.value)

      console.log('获取电影成功')
    }
  })
}

// 获取电影下的评论
function getReviews(movie_id) {
  request.get('/review/',
  {
    params: {
      movie_id: movie_id,
      current: 1,
      pagesize: 10
    }
  }
  ).then(res => {
    if (res.code !== 200) {
      console.log('获取评论失败')
      ElMessage.error('获取评论失败')

    } else {
      console.log(res.data)
      console.log('获取评论成功')
    }
  })
}




</script>

<style scoped>
* {
  color: #f5f5f5;
}
.review-section {
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 1200px;
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.review-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.review-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 768px) {
  .review-section {
    width: 90%;
    padding: 1rem;
  }
}
.info-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: scroll;
  width: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  padding: 2rem 0;
  row-gap: 2rem;
}

.movie-detail {
  display: flex;
  justify-content: start;
  column-gap: 2rem;
  width: 80%;
  max-width: 1200px;
  flex: 1;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.movie-image {
  border: 3px solid rgba(255, 255, 255, 0.1);
  width: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.movie-image:hover {
  transform: scale(1.02);
}

.movie-briefInfo {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 1rem;
  flex: 1;
}

.movie-info-item {
  background: rgba(255, 255, 255, 0.08);
  padding: 1rem;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.movie-info-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.movie-info-item.title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
}

.movie-info-item.type {
  font-size: 1.2rem;
  color: #b8b8b8;
}

.movie-info-item.date {
  font-size: 1.1rem;
  color: #999;
}

.movie-description {
  width: 80%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 2rem;
  line-height: 1.6;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.movie-description h3 {
  margin-bottom: 1rem;
  color: #fff;
  font-size: 1.4rem;
}

.movie-description p {
  color: #b8b8b8;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .movie-detail {
    flex-direction: column;
    align-items: center;
  }

  .movie-image {
    width: 100%;
    height: auto;
  }

  .movie-briefInfo {
    width: 100%;
  }
}
</style>
